<template>
  <div class="container">
    <div class="box">
      <div class="title">抖音分享平台</div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="ruleForm.account"
            autocomplete="off"
            placeholder="请输入账号"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
            style="width: 180px"
          />
        </el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          style="margin-left: 50px; margin-top: 10px; width: 150px"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { login } from "../api/admin.js";
import router from "@/router";
const ruleFormRef = ref();
const ruleForm = reactive({
  account: "",
  password: "",
});
const rules = reactive({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    const { account, password } = ruleForm;
    if (valid) {
      login({ account, password, role: 3 })
        .then((res) => {
          if (res?.code === 0) {
            localStorage.setItem("userInfo", JSON.stringify(res.data));
            router.push("/manager");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    } else {
      console.log("error submit!");
    }
  });
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  justify-content: center;
  align-items: center;
}
.title {
  margin-bottom: 35px;
  font-size: 17px;
  font-weight: bold;
}
.box {
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 10px #e2dcdc;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
